<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport"
	content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection"
	content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css"
	href="../c-asserts/sui/sui1.0.1.css" />
<link rel="stylesheet" type="text/css"
	href="../c-asserts/mui/css/mui.min.css" />
<link rel="stylesheet" type="text/css"
	href="../c-asserts/swiper/css/swiper.css" />
<style type="text/css">
.transparent {
	position: fixed;
	z-index: 1990;
	background-color: #EB4F38;
	height: 44px;
	width: 100%;
	opacity: 0.0;
	top: 0;
}

.header {
	width: 100%;
	position: fixed;
	z-index: 19901225;
	height: 44px;
	line-height: 44px;
	background-color: transparent;
	top: 0;
}

.mui-icon-back, .sui-icon-share {
	color: #FFFFFF;
	font-size: 24px !important;
	line-height: 32px;
}

.mui-icon-star {
	color: #FFFFFF;
	font-size: 24px !important;
	line-height: 32px;
}

.mui-icon-starhalf {
	color: #FFFFFF;
	font-size: 24px !important;
	line-height: 32px;
}

.share {
	right: 10px;
}

.item-option {
	margin-bottom: 12px;
	background-color: #FFFFFF;
}

.content-item {
	padding: 10px 12px;
}

.content-item {
	border-bottom: 1px solid #efeff4;
}

.theme-name {
	font-size: 16px;
	color: #666666;
	padding-bottom: 4px;
}

.theme-h4 {
	font-size: 16px;
	color: #666666;
}

.theme-h4.teambuy {
	line-height: 25px;
}

.content-duang {
	font-size: 15px;
	color: #8f8f94;
	padding-left: 12px;
}

.swiper-slide img {
	width: 100%;
}

.theme-img img {
	width: 70px;
	height: 60px;
}

.evaluate-img img {
	width: 45px;
	height: 45px;
	border-radius: 100%;
}

.mui-icon-arrowright {
	font-size: 20px !important;
	line-height: 20px;
}

.item-price {
	font-size: 28px;
	font-weight: bold;
	line-height: 33px;
	color: #20cab0;
}

.theme-type {
	font-size: 15px;
	color: #8f8f94;
}

.shopinfo {
	position: relative;
	height: 40px;
}

.weizhi {
	position: absolute;
	width: auto;
	left: 40px;
	right: 60px;
	font-size: 14px;
	line-height: 20px;
	height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #8f8f94;
}

.location {
	width: 40px;
	position: absolute;
	left: 0;
}

.location span {
	display: block;
	font-size: 23px;
	color: #666666;
	line-height: 40px;
	text-align: center;
}

.phone {
	position: absolute;
	right: 0;
	padding-left: 10px;
	border-left: 1px solid #efeff4;
}

.phone span {
	display: block;
	font-size: 32px;
	line-height: 40px;
	color: #FFFFFF;
	background-color: #4cd964;
	padding: 0 4px;
	border-radius: 5px;
}

.swiper-container {
	height: 260px;
}

.evaluate-img img {
	width: 45px;
	height: 45px;
	border-radius: 100%;
}

.evaluate-content {
	padding-top: 5px;
	height: auto;
	color: #666666;
	font-size: 14px;
	white-space: normal;
}

.evaluate-reply {
	color: #ff7720;
	font-size: 14px;
}

.evaluate-star-box {
	width: 100px;
	background-color: #c4c2c2;
	height: 21px;
}

.evaluate-star1 {
	width: 20px;
	height: 21px;
	background-color: #ff7720;
}

.evaluate-star2 {
	width: 40px;
	height: 21px;
	background-color: #ff7720;
}

.evaluate-star3 {
	width: 60px;
	height: 21px;
	background-color: #ff7720;
}

.evaluate-star4 {
	width: 80px;
	height: 21px;
	background-color: #ff7720;
}

.evaluate-star5 {
	width: 100px;
	height: 21px;
	background-color: #ff7720;
}

.evaluate-starback {
	width: 100px;
	background-image: url(../c-images/star.png);
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	height: 21px;
}
</style>
</head>
<body ms-controller="theme-detail" class="ms-controller">
	<div class="transparent"></div>
	<div class="header">
		<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left back"
			onclick="javascript:history.back(-1);" tapmode>
			<span class="mui-icon mui-icon-back"></span>
		</button>
		<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right star"
			onclick="themecollect()" tapmode>
			<span class="mui-icon mui-icon-star"></span>
		</button>
	</div>
	<div class="item-option">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" ms-repeat="theme.photo"
					data-repeat-rendered="imgReady">
					<img ms-attr-src="el + '?imageView2/1/h/260'">
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="content-item">
			<div class="theme-name">{{theme.themename}}</div>
			<div class="theme-type">{{getNameById(icontent,theme.content)}}，{{getNameById(isize,theme.size)}}，{{getNameById(icategory,theme.category)}}</div>
			<div class="sui-flex-row">
				<div class="theme-type">难度：</div>
				<div class="evaluate-star-box">
					<div ms-class="evaluate-star{{theme.diffstar}}">
						<div class="evaluate-starback"></div>
					</div>
				</div>
				<div class="theme-type">逻辑：</div>
				<div class="evaluate-star-box">
					<div ms-class="evaluate-star{{theme.logicstar}}">
						<div class="evaluate-starback"></div>
					</div>
				</div>
			</div>
			<div class="sui-flex-row">
				<div class="theme-type">动作：</div>
				<div class="evaluate-star-box">
					<div ms-class="evaluate-star{{theme.actionstar}}">
						<div class="evaluate-starback"></div>
					</div>
				</div>
				<div class="theme-type">场景：</div>
				<div class="evaluate-star-box">
					<div ms-class="evaluate-star{{theme.scenestar}}">
						<div class="evaluate-starback"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="content-item">
			<div class="sui-flex-row">
				<div class="item-price">￥{{theme.displayprice}}</div>
				<div class="theme-type"
					style="padding-top: 15px; padding-left: 18px;">已售
					{{theme.soldnum}}</div>
				<div class="sui-flex1"></div>
				<div class="createteam">
					<button class="mui-btn mui-btn-green"
						ms-click="createTeam(theme.themeid)">立即购票</button>
				</div>
			</div>
		</div>
	</div>

	<div class="item-option">
		<div class="content-item sui-flex-row"
			ms-visible="(theme.evalstar==0)">
			<div class="content-duang">暂无评价</div>
		</div>
		<div class="content-item sui-flex-row"
			ms-visible="(theme.evalstar!=0)" ms-click="toEval(theme.themeid,theme.shopid)">
			<div class="evaluate-star-box">
				<div ms-class="evaluate-star{{theme.evalstar}}">
					<div class="evaluate-starback"></div>
				</div>
			</div>
			<div class="content-duang">{{theme.evalstar}}分</div>
			<div class="sui-flex1"></div>
			<div class="content-duang">
				评价<span class="mui-icon mui-icon-arrowright"></span>
			</div>
		</div>
	</div>

	<div class="item-option">
		<div class="content-item sui-flex-row" ms-click="toShop(theme.shopid)">
			<div class="theme-h4 teambuy">商家信息</div>
			<div class="sui-flex1"></div>
			<div class="content-duang">
				<span class="mui-icon mui-icon-arrowright"></span>
			</div>
		</div>
		<div class="content-item">
			<div class="shopinfo">
				<div class="location">
					<span class="mui-icon mui-icon-location"></span>
				</div>
				<div class="weizhi"
					ms-click="toMap(theme.lon,theme.lat,theme.shopname)">{{theme.area}}
					{{theme.street}}</div>
				<div class="phone" ms-click="phoneCall(theme.phone)">
					<span class="mui-icon  mui-icon-phone"></span>
				</div>
			</div>
		</div>
	</div>

	<div class="item-option">
		<div class="content-item sui-flex-row">
			<div class="theme-h4 teambuy">购买须知</div>
		</div>
		<div class="content-item">
			<div class="theme-type" ms-html="theme.remark"></div>
		</div>
	</div>

	<div class="item-option">
		<div class="content-item sui-flex-row">
			<div class="theme-h4 teambuy">用户评价</div>
			<div class="sui-flex1"></div>
			<div class="content-duang"></div>
		</div>
		<ul class="mui-table-view">
			<li ms-repeat="evals" class="mui-table-view-cell mui-media"
				style="white-space: normal;"><a href="javascript:;" class="">
					<img ms-attr-src="el.headimgurl"
					class="mui-media-object mui-pull-left">
					<div class="mui-media-body">
						<div class="sui-flex-row">
							{{el.username}}
							<div class="sui-flex1"></div>
							<div class="review-zan" ms-click="zanClick(el.id)">
								<span class="sui-icon sui-icon-zan">{{el.like}}</span>
							</div>
						</div>
						<div class="sui-flex-row">
							<div class="evaluate-star-box">
								<div ms-class="evaluate-star{{el.evalstar}}">
									<div class="evaluate-starback"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="evaluate-content">{{el.content}}</div>
					<div class="mui-content-padded evaluate-content"
						ms-visible="(el.reply!='')">
						<span class="evaluate-reply">商家回复：</span> {{el.reply}}
					</div>
			</a></li>
		</ul>
	</div>


</body>
<script type="text/javascript" src="../c-script/api.js"></script>
<script type="text/javascript" src="../c-script/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../c-script/public.js"></script>
<script type="text/javascript" src="../c-script/avalon.mobile.js"></script>
<script type="text/javascript"
	src="../c-asserts/swiper/js/swiper.min.js"></script>
<script type="text/javascript">
	var transparent;
	var wrapper;
	var bodyHeight;
	var shopi="1";
	var themeModel = avalon.define({
		$id : "theme-detail",
		theme : {},
		evals : new Array(),
		imgReady : function() {//在dom渲染完成之后再初始化swiper-wrapper插件
			var mySwiper = new Swiper('.swiper-container', {
				pagination : '.swiper-pagination',
				loop : true,
				autoplay : 5000
			});
			transparent = $('.transparent');
			wrapper = $('.swiper-wrapper').height() - 44;
			bodyHeight = $('body').height();
			setInterval(function() {
				var htmlbi = wrapper / bodyHeight;
				var scrolltop = document.body.scrollTop;
				var scrollheight = document.body.scrollHeight;
				var scrollbi = scrolltop / scrollheight;
				if (scrollbi < htmlbi)
					transparent.css('opacity', parseFloat(scrollbi / htmlbi)
							.toFixed(1));
				else
					transparent.css('opacity', 1);
			}, 100);
		},
		phoneCall : function(number) {
			api.call({
				number : number
			});
		},
		toShop : function(shopid) {
			shopid=shopid;
			location.href="main/shop.html?shopid="+shopid;
		},
		toMap : function(lon, lat, name) {
			api.openWin({
				name : 'amapwin',
				url : '../public/amapwin.html',
				pageParam : {
					lon : lon,
					lat : lat,
					name : name
				}
			});
		},
		toEval : function(themeid, shopid) {
				var	themeid =themeid;
				shopid=shopid;
			location.href="main/evaluate.html?themeid="+themeid+"&shopid="+shopid;
		},
		createTeam : function(themeid) {
            location.href = "order/submitWin.html?themeid=" + window.location.search;
            
		}
	});

	var isinit = false;

	$(document).ready(function() {
		if (isinit)
			return;
		// iosConfig($('.transparent'));
		// var iosHeight = iosConfig($('.header'));
         callSvr("theme/getById",
				parseQueryString(window.location.search), function(result){
			themeModel.theme = result;
			var pan=parseQueryString(window.location.search);
			pan.type="4";
			pan.page=1;
			pan.pagesize=3;
			callSvr("eval/find",pan, function(result) {
				themeModel.evals = result;
			});
		});
		isinit = true;
	});

	function themecollect() {
		$('.mui-icon-star').find('.mui-icon-starhalf');
		callSvr('user/collectTheme.json', {
			themeid : themeid,
			code : getUserCode()
		}, function(ret) {
		});
		alert("收藏成功");
	};
</script>
</html>